<template>
	<view>
		<wrapBgImg bgImg="goods/goods_top.png" />
		
		<navigationBarVue
			:bgImgType="1"
			navigationTitle="运费"
			@onTotalHeight="onTotalHeight"
		/>
		
		<view class="wrap paddingBottom"
			:style="'padding-top: calc(' + (topHeight + 10) + 'px) !important;'"
		>
			<view class="wrap-list flex column">
				<block v-for="(item, index) in list" :key="index">
					<view class="item">
						<view class="title-bg flex align-center just-between">
							<view class="title">
								{{ item.name }}
							</view>
							
							<view class="btn-bg flex align-center">
								<image
									class="btn"
									@click="onDelete(item)"
									:src="$staticImagePath('goods/yf_sc.png')"
								/>
								
								<image
									class="btn"
									@click="onEdit(item)"
									:src="$staticImagePath('goods/yf_bj.png')"
								/>
							</view>
						</view>
						
						<view class="wrap-area-content" v-if="item.isdelivery == 0 && item.children.length > 0">
							<block v-for="(subItem, index) in item.children" :key="index">
								<view class="area-item flex column">
									<view class="area-title">
										可配送区域
									</view>
									
									<view class="area-name">
										{{ subItem.address_text.join("，") }}
									</view>
									
									<view class="area-box flex align-center just-between">
										<view>
											{{ ["首件", "首重", "首体积"][item.valuation] }}{{ subItem.first }}{{ ["件", "kg", "m³"][item.valuation] }}
										</view>
										
										<view>
											运费{{ subItem.first_fee }}元
										</view>
									</view>
									
									<view class="area-box flex align-center just-between">
										<view>
											{{ ["续件", "续重", "续体积"][item.valuation] }}{{ subItem.additional }}{{ ["件", "kg", "m³"][item.valuation] }}
										</view>
										
										<view>
											运费{{ subItem.additional_fee }}元
										</view>
									</view>
								</view>
							</block>
						</view>
					</view>
				</block>
			</view>
			
			<wanl-empty 
				v-if="list.length === 0"
				text="暂无运费模版"
			/>
		</view>
		
		<wrapFooterVue>
			<view class="wrap-footer-content flex align-center just-center">
				<view class="add" @click.stop="onAdd">
					新增运费模板
				</view>
			</view>
		</wrapFooterVue>
	</view>
</template>

<script>
	import { GetLogisticsList, DelLogistics } from "@/utils/API.js";
	
	import wrapBgImg from "../components/navigationBar/bgImg.vue";
	import navigationBarVue from "../components/navigationBar/navigationBar.vue";
	import wrapFooterVue from "../components/footer/footer.vue";
	
	export default {
		components: {
			wrapBgImg,
			navigationBarVue,
			wrapFooterVue,
		},
		data() {
			return {
				topHeight: 0, //顶部高度 
				
				page: 1,
				total: 0,
				list: [],
			}
		},
		onShow() {
			this.onRefresh();
		},
		onPullDownRefresh() {
			this.onRefresh();
		},
		onReachBottom() {
			if (this.list.length < this.total) {
				this.page++;
				this.getData();
			}
		},
		methods: {
			/**
			 * 高度
			 */
			onTotalHeight(height) {
				this.topHeight = height;
			},
			
			/**
			 * 删除
			 */
			onDelete(item) {
				uni.showModal({
					title: "提示",
					content: "确定删除此模版？",
					success: res => {
						if (res.confirm) {
							this.sureDeleteData(item.id);
						}
					}
				})
			},
			/**
			 * 确认删除
			 */
			sureDeleteData(id) {
				this.$throttle(() => {
					DelLogistics(id).then(res => {
						this.$st.success("删除成功", () => {
							this.onRefresh();
						})
					})
				})
			},
			/**
			 * 编辑
			 */
			onEdit(item) {
				this.$wanlshop.to(`/pages/new/newlyAdded/newlyAdded?id=${item.id}`);
			},
			/**
			 * 添加运费
			 */
			onAdd() {
				this.$wanlshop.to(`/pages/new/newlyAdded/newlyAdded`);
			},
			/**
			 * 刷新
			 */
			onRefresh() {
				this.page = 1;
				this.list = [];
				this.getData();
			},
			/**
			 * 网络请求
			 */
			getData() {
				GetLogisticsList({
					page: this.page,
					type: 0,
				}).then(res => {
					const list = res.data.data;
					this.total = res.data.total;
					if (this.page == 1) {
						this.list = list;
					} else {
						this.list = this.list.concat(list);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.wrap {
		--bottom-height: 140rpx;
		padding: 33rpx;
		box-sizing: border-box;
		
		.wrap-list {
			width: 100%;
			overflow: hidden;
			gap: 20rpx;
			
			.item {
				width: 100%;
				padding: 0rpx 30rpx;
				background-color: white;
				box-sizing: border-box;
				border-radius: 20rpx;
				overflow: hidden;
				
				.title-bg {
					width: 100%;
					height: 110rpx;
					border-bottom: 2rpx solid #DBDBDB;
					overflow: hidden;
					gap: 20rpx;
					
					.title {
						flex: 1;
						overflow: hidden;
						color: #333333;
						font-size: 30rpx;
					}
					
					.btn-bg {
						flex-shrink: 0;
						overflow: hidden;
						gap: 35rpx;
						
						.btn {
							width: 37rpx;
							height: 37rpx;
						}
					}
				}
				
				.wrap-area-content {
					padding: 40rpx 0rpx;
					width: 100%;
					overflow: hidden;
					
					.area-item {
						width: 100%;
						overflow: hidden;
						gap: 30rpx;
						margin-bottom: 30rpx;
						
						&:last-child {
							margin-bottom: 0rpx;
						}
						
						.area-title {
							color: #999999;
							font-size: 30rpx;
						}
						
						.area-name {
							color: #999999;
							font-size: 26rpx;
							line-height: 1.5;
						}
						
						.area-box {
							width: 100%;
							overflow: hidden;
							color: #333333;
							font-size: 30rpx;
						}
					}
				}
			}
		}
	}
	
	.wrap-footer-content {
		width: 100vw;
		height: 120rpx;
		overflow: hidden;
		padding: 0rpx 37rpx;
		box-sizing: border-box;
		
		.add {
			width: 100%;
			height: 82rpx;
			line-height: 82rpx;
			text-align: center;
			background: linear-gradient(to right, #84BD00, #4982EA);
			border-radius: 50rpx;
			overflow: hidden;
			color: white;
			font-size: 30rpx;
		}
	}
</style>